import { useState } from 'react'
import { Tabs } from 'antd-mobile'
import './App.css'

function App() {
  
    let [dataList,setDataList]=useState([])
    let [pag,setPag]=useState(1)
    const first=async ()=>{
      const res=await axios.get('/api/room/list')
      console.log(res)
      const newData=res.data.data.list
       setDataList([...dataList,...newData])
        setPag(pag+1)
    }
  return (
    <>
      <Tabs>
          <Tabs.Tab title='水果' key='fruits'>
            菠萝
          </Tabs.Tab>
          <Tabs.Tab title='蔬菜' key='vegetables'>
            西红柿
          </Tabs.Tab>
          <Tabs.Tab title='动物' key='animals'>
           <div>
        {
          dataList &&dataList.forEach((item,index)=>
             <dl>
              <dt><img src={item.pic}/></dt>
              <dd>
                 <p>{item.name}</p>
                 <p>{item.title}</p>
              </dd>
             </dl>
          )
        }
      </div>
          </Tabs.Tab>
        </Tabs>
         <InfiniteScroll loadMore={first} hasMore={true} />
    </>
  )
}

export default App
